<template>
  <div>
    <p
      v-for="item in opteionsitems"
      :key="item[date.code]"
      :class="item[date.code] === isactive ? 'isActive' : null"
      class="item"
      @click="changeAction(item[date.code])"
    >
      {{ item[date.name] }}
    </p>
  </div>
</template>

<script>
import select from "@/mixins/select";
export default {
  mixins: [select],
  // eslint-disable-next-line vue/require-prop-types
  props: [
    "options",
    "name",
    "label",
    "value",
    "disabled",
    "optionsurl",
    "date",
    "formData",
  ],
  data() {
    return {
      opteionsitems: [],
      isactive: 1,
    };
  },
  watch: {
    value() {
      this.isactive = this.value;
    },
    "formData.cityid": {
      handler(newValue, oldValue) {
        this.queryAction();
      },
      deep: true,
    },
    "formData.AreaId": {
      handler(newValue, oldValue) {
        this.queryAction();
      },
      deep: true,
    },
    "formData.dptId": {
      handler(newValue, oldValue) {
        this.queryAction();
      },
      deep: true,
    },
  },
  created() {
    this.isactive = this.value;

    if (this.optionsurl) {
      this.queryAction();
    } else {
      this.opteionsitems = this.options;
    }
  },
  methods: {
    statusAction() {},
    changeAction(value) {
      this.isactive = value;
      // 如果选择的是 街道  需要初始化 食堂id
      if (this.date.childCode) {
        this.$emit(
          "input",
          this.date.childCode,
          this.date.codeValue ? this.date.codeValue : null
        );
      }
      this.$emit("change", this.name, value);
    },
    queryAction() {
      const obj = {};
      if (this.date.parentCode) {
        obj.id = this.formData[this.date.parentCode];
      }
      this.api[this.optionsurl](obj).then((res) => {
        const arrobj = {};
        arrobj.id = null;
        arrobj[this.date.code] = this.date.codeValue
          ? this.date.codeValue
          : null;
        arrobj[this.date.name] = "全部";
        const arr = [{ ...arrobj }];
        this.opteionsitems = [...arr, ...res];
      });
    },
  },
};
</script>
<style lang="less" scoped>
.item {
  display: inline-block;
  padding: 0 0.2rem;
  margin: 0.05rem;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #dadada;
  color: #6b6b6b;
}
.isActive {
  background: #000965;
  border-radius: 4px;
  color: #fff;
  border: 1px solid #000965;
}
</style>
